<template>
    <div>
          <!--聊天内容-->
          <div style="width: 500px;height: 300px;border: 1px solid red" v-html="chat">

          </div>
          <input type="text" v-model="info">
          <select v-model="pName">
                <template v-for="x in list">
                  <option :value="x">{{x}}</option>
                </template>
          </select>
          <button type="button" @click="send">发送消息</button>
          <button type="button" @click="sendP">私聊</button>
    </div>

</template>

<script>
    export default {
        name: "TestChat",
        data(){
           return{
               chat:"",//聊天内容
               info:"",//发送消息
               ws:null,//websocket对象
               pName:"",//选中私聊的姓名或者id
               list:[]//所有人的姓名或者id
           }
        },
        methods:{
              send(){
                  //发送消息给服务端
                  this.ws.send(this.info);
              },
              sendP(){//私聊
                //获取选中私聊人的回话id
                this.ws.send(this.info+"&"+this.pName);
              }

        },
        created() {
            const self = this;
            const name = localStorage.getItem("name");
            //创建websocet对象，完成和服务段第一次握手
            this.ws = new WebSocket("ws://localhost:8003/testChat/"+name);
            //客户端与服务端建立连接触发的事件
            this.ws.onopen=function () {
                  console.log("与服务端创建连接成功");
            }
            //服务端向客户端发送数据触发的事件
            //接受服务端的数据
            this.ws.onmessage=function (msg) {
              console.log("服务端发送的数据是:"+msg.data);
              //获取状态码
              const code = msg.data.split("&")[1];
              if(code==1){
                self.chat+="<p>"+msg.data.split("&")[0]+"</p>";
              }else if(code==3){
                //记录在线人的回话id
                self.list.push(msg.data.split("&")[0]);
              }else{
                //私聊
                self.chat+="<p>"+msg.data.split("&")[0]+"</p>";
              }

            }
            //服务端与客户端断开连接触发的事件
            this.ws.onclose=function () {
              console.log("与服务端断开连接");
            }
            //客户端与服务端发生异常触发的事件
            this.ws.onerror=function () {
              console.log("与服务端发生异常");
            }



        }

    }
</script>

<style scoped>

</style>
